<template>
  <li id="header-user" class="dropdown">
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <a href="javascript:" class="dropdown-toggle clear" aria-haspopup="true" aria-expanded="true">
              <span class="thumb-sm avatar pull-right m-l-sm">
                <img :src="headImg" onerror="this.onerror=null;this.src='/static/images/avatar.png'"
                     id="nav-user-photo" alt="...">
                <i class="on md b-white bottom"></i>
              </span>
          <span class="hidden-sm hidden-md nav-user-name">{{currentUser.name}}</span> <b class="caret"></b>
        </a>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="info">基本资料</el-dropdown-item>
        <el-dropdown-item command="password">修改密码</el-dropdown-item>
        <el-dropdown-item command="out" divided>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </li>
</template>
<script>

  import {SERVICE_URLS} from '../../config/service.url'
  import Vue from 'vue'

  export default{
    data(){
      return {
        user: null
      }
    },
    methods: {
      handleCommand(command){
        if (command == "info") {
          this.$router.push("/index/user/basicInfo");
        } else if (command == "password") {
          this.$router.push("/index/user/password");
        } else {
          this.$confirm('确认退出吗?', '提示', {
            confirmButtonText: '退出',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            sessionStorage.removeItem("token");
            this.$store.commit('currentUserUpdate', null);
            this.$store.commit('cacheDataUpdate', {
              name: "basicDataLoading",
              value: false
            });
            this.$router.push("/login");
          }).catch(() => {

          });
        }
      }
    },
    computed: {
      currentUser(){
        this.user = this.$store.state.currentUser;
        if (this.user == null) return {}
        return this.$store.state.currentUser;
      },
      headImg(){
        if (this.user == null || this.user.headImg == null) {
          return ""
        } else {
          return this.user.headImg
            + (this.user.headImg.indexOf("?") == -1 ? "?" : "|")
            + "imageView2/1/w/100/h/100";
        }
      }
    }
  }
</script>
<style>
  .el-message-box {
    width: 300px;
  }
</style>
<style scoped>
  .dropdown-toggle {
    margin-right: 5px;
    margin-left: 15px;
  }

  .dropdown {
    margin-right: 25px;
    line-height: 50px;
    height: 50px;
  }

  .el-dropdown {
    line-height: 50px;
  }

  .el-dropdown-menu {
    margin-top: 0;
    width: 126px;
    border: none;
  }

  .dropdown:hover {
    background-color: #23b7e5;
  }
</style>
